<template>
	<view >
		<!-- 导航栏 -->
		<tab-swiper-head :tabIndex="tabIndex" :tabBars="tabBars" @tapTab="tap"></tab-swiper-head>
			<view class="uni-tab-bar" :style="{height:TabHeight+'px'}" >
				
			<swiper class="swiper-box" :current="tabIndex" @change='tabChange'  >
				
				<swiper-item  v-for="(items ,index) in topiclist" :key="index">
					<view class="">
						
					</view>
					<scroll-view scroll-y="true" class="list" @scrolltolower="lodemore(index)">
						<!-- 没有内容显示 -->
						
						<template  v-if="index>items.list.length||index<0">
							
							<nothing></nothing>
						</template>
						<!-- 图文列表 -->
						<template v-else>
						
						<!-- <最近更新 -->
							
						<topic-lately :latelyda='items.list'></topic-lately>
							
						
						
						<!-- 上拉刷新 -->
					
					</template>
					<view  @click="lodemore(index)">
						<load-more  :message="items.message"></load-more>
					</view>
					
				</scroll-view>
				</swiper-item>
				
			</swiper>
			</view>
	
	
	</view>
</template>

<script>
	import topicLately from '../../components/topic/topic-lately.vue'
	import tabSwiperHead from '../../components/index/tab-swiper-head.vue'
	import loadMore from '../../components/common/load-more.vue'
	import nothing from '../../components/common/nothing.vue'
	export default {
		components:{
			topicLately,
			tabSwiperHead,
			loadMore,
			nothing
		},
		data() {
			return {
				index:0,
				TabHeight:500,//高度
				tabIndex:0,//导航栏列表下标
				
				tabBars: [{
				    name: '关注',
				    id: 'guanzhu'
				}, {
				    name: '推荐',
				    id: 'tuijian'
				}, {
				    name: '体育',
				    id: 'tiyu'
				}, {
				    name: '热点',
				    id: 'redian'
				}, {
				    name: '我是',
				    id: 'caijing'
				}],
				topiclist:[	     {
											message:'上拉加载更多',
							list:[
								{
									img:'../../static/demo/demo6.jpg',
									title:'#你真棒#',
									text:'你是最棒的大傻逼',
									newnum:21,
									todaynum:99,
									id:1
								},
								{
									img:'../../static/demo/demo6.jpg',
									title:'#你真棒#',
									text:'你是最棒的大傻逼',
									newnum:21,
									todaynum:99,
									id:1
								},
								{
									img:'../../static/demo/demo6.jpg',
									title:'#你真棒#',
									text:'你是最棒的大傻逼',
									newnum:21,
									todaynum:99,
									id:1
								},
								{
									img:'../../static/demo/demo6.jpg',
									title:'#你真棒#',
									text:'你是最棒的大傻逼',
									newnum:21,
									todaynum:99,
									id:1
								},
								{
									img:'../../static/demo/demo6.jpg',
									title:'#你真棒#',
									text:'你是最棒的大傻逼',
									newnum:21,
									todaynum:99,
									id:1
								}
									]
								},
								{
									message:'上拉加载更多',
									list:[
										
									]
								},
								{
									message:'上拉加载更多',
									list:[
										
									]
								},
								{
									message:'上拉加载更多',
									list:[
										
									]
								}
								
									]
								}
		},
		methods: {
			//切换tab
			tap(index){
			this.tabIndex=index	
			
			},
			//滑动tab
			tabChange(event){
				this.tabIndex=event.detail.current
			},
			lodemore(index){
				console.log(this.topiclist[index].message)
			
				if(this.topiclist[index].message!="上拉加载更多"){
					return
				}
				
				//创建一个虚拟对象
				this.topiclist[index].message="加载中"
				
					//加载话题
					setTimeout(()=> {
						let obj=	{
						img:'../../static/demo/demo6.jpg',
						title:'#我是新加载的#',
						text:'你是最棒的大傻逼',
						newnum:11,
						todaynum:1,
						id:1
					}
				console.log(this.topiclist[index])
				this.topiclist[index].list.push(obj);
				this.topiclist[index].message="上拉加载更多"
					}, 1000);
	

			},
		},
		onLoad() {
			uni.getSystemInfo({
			    success:  (res) =>{
			      
			     let height=  res.windowHeight-uni.upx2px(100);
				 this.TabHeight=height;
			     
			    }
			});
		},
		//监听搜索框点击时间
		onNavigationBarSearchInputClicked(){
			uni.navigateTo({
				url:'../search/search'
			})
		}
	}
</script>

<style>

</style>
